<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>产品兑换</title>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv="Cache-Control" content="no-transform">
		<meta name="format-detection" content="telephone=no">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<link rel="stylesheet" href="style/css/basic.css">
		<link rel="stylesheet" href="style/css/settlement.css" />
		<link rel="stylesheet" href="style/css/add_address.css" />
		<script type="text/javascript" src="style/plugin/mui/js/mui.min.js"></script>
		<script type="text/javascript" src="style/js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="style/mockjs/dist/mock.js"></script>
		<script type="text/javascript" src="style/js/vue.min.js"></script>
		<script type="text/javascript" src="style/js/vue-resource.js"></script>
		<script type="text/javascript" src="style/js/basic.js"></script>
		<script src="style/citypicker/js/common.js"></script>
		<script src="style/citypicker/js/Popt.js"></script>
		<script src="style/citypicker/js/cityJson.js"></script>
		<script src="style/citypicker/js/citySet.js"></script>
	</head>

	<body>
		<div id="settle">
		    <div id="header">
				<span class="backicon"></span>
				<h1>产品兑换</h1>
			</div>
			<div class="body">
				<div class="my_intergral">
					<h2>我的积分：{{myMsg}}</h2>
				</div>  
				<div class="cart">
					<ul>
						<li v-for="(good,index) in goodMsg">
							<div class="shop_info">
								<div class="shop_info_right">
									<div class="shop_info_right_top">
										<div class="shop_info_img">
											<a href="#"><img :src="htp+good.img"></a>
										</div>
										<div class="shop_info_text">
											<h4>{{good.title}}</h4>
											<div class="shop_pices"><b class="price">{{good.price}}积分</b><b class="num fr">x{{good.num}}</b></div>
										</div>
	
									</div>
								</div>
							</div>
						</li>
	
					</ul>
				</div>
				<div class="otherinfo">
					<ul>
						<li>
							<span class="fl">姓 名</span>
							<input type="text" name="text" placeholder="请输入收货人姓名" v-model="recman"/>
						</li>
						<li>
							<span class="fl">电 话</span>
							<input type="text" name="text" placeholder="请输入收货人电话" v-model="rectel"/>
						</li>
						<li data-role="page" id="test">
							<div class="ui-content">
								<div data-role="listview">
									<div>
										<span class="fl">所在地区</span>
										<input type="text" name="city" placeholder="所在地区" id="city" readonly/>
									</div>
								</div>
							</div>
						</li>
						<li>
							<span class="fl">详细地址</span>
							<input type="text" name="text" placeholder="如道路、门牌号、小区等" v-model="recaddr"/>
						</li>
						<!--<li>
							<span class="fl">订单备注</span>
							<input type="text" name="text" placeholder="请输入需要填写的备注" v-model="beizhu"/>
						</li>-->
					</ul>
				</div>
				<div  class="exchange maxwidth">
					<a href="javascript:void(0);" class="text_right">合计：<b class="total_color">{{this.allprice}}积分</b></a>
					<a href="javascript:;" class="exchange_btn" @tap="subpro"><span class="pay">立即兑换</span></a>
				</div>
			</div>	
		</div> 
        <script>
        	new Vue({
        		el:"#settle",
        		data:{
        			goodMsg:"",
        			cartcan:"",
        			recaddr:"",
        			allprice:0,
        			beizhu:"",
        			rectel:"",
        			recman:"",
        			htp:"",
        			ticket:"",
				    sign:"",
				    myMsg:""
        		},
        		methods:{
        			subpro:function(){
        				var a=sessionStorage.getItem("province");
        				var b=sessionStorage.getItem("city")
        				var c=sessionStorage.getItem("county")
        				this.$http.post(domain+"/score_order/create?t="+this.ticket+"&sign="+this.sign,{
					    	good_info:this.cartcan,
					    	accept_name:this.recman,
					    	accept_phone:this.rectel,
					    	address:this.recaddr,
					    	province_id:a,
					    	city_id:b,
					    	area_id:c,
					    	cart:0
					    },{emulateJSON:true}).then(
				            function (res) {
				                // 处理成功的结果
				                if(res.body.code==1){
				                  mui.toast(res.body.msg)
                                  mui.back()
				                }else{
				                  mui.toast(res.body.msg)
				                }
				            },function (res) {
				            // 处理失败的结果
				            console.log(res) 
				            } 
				        ); 
        			}
        		},
        		created:function(){
        			this.ticket=localStorage.getItem("tick")
                    this.sign=localStorage.getItem("sig")
                    this.$http.post(domain+"/member/getInfo?t="+this.ticket+"&sign="+this.sign,{emulateJSON:true}).then(
			            function (res) {
			                // 处理成功的结果
			                console.log(res.body)
			                if(res.body.code==1){
			                  this.myMsg=res.body.data.score;
			                }else{
			                	mui.toast("暂无商品")
			                }
			            },function (res) {
			            // 处理失败的结果
			            console.log(res) 
			            }
			        )
        		},
        		mounted:function(){
        			this.htp=domain2
        			this.cartcan=localStorage.getItem("pcanshu")
        			this.goodMsg=JSON.parse(localStorage.getItem("pgoodmsg"))
        			console.log(this.goodMsg)
        			localStorage.removeItem("canshu")
        			localStorage.removeItem("goodmsg")
        			for(i=0;i<this.goodMsg.length;i++){
        				this.allprice+=(parseFloat(this.goodMsg[i].price)*parseFloat(this.goodMsg[i].num))
        			}
        		}
        	})
        </script>
	</body>

</html>